<template>
  <tm-app ref="app">
    <!-- <tm-navbar :title="data.queryItem.title"></tm-navbar> -->
    <breadCrumb :dataList="data.titleArray"></breadCrumb>
    <tm-sheet :margin="[0]" :padding="[0,50]" _class="text-align-center">
      <view class="title flex ">
        <img :src="data.queryItem.icon" class="icon-img"/>
        {{ data.queryItem.title }}关系情况
      </view>
      <tm-sheet :margin="[0,50]" :padding="[0]">
        <tm-grid :width="750" :col="2">
          <tm-grid-item @click="goMembers">
            <tm-text color="#666666" :font-size="28">好友数</tm-text>
            <view class="num">{{ data.memberLength }}</view>
          </tm-grid-item>
          <tm-grid-item>
            <tm-text color="#666666" :font-size="28">动态数</tm-text>
            <view class="num">0</view>
          </tm-grid-item>
        </tm-grid>
      </tm-sheet>
     
    </tm-sheet>
  </tm-app>
</template>

<script lang="ts" setup>
import { onLoad,onShow } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import * as config from '../config/menuOperate'
import breadCrumb from '../../../components/breadCrumb/index.vue'
const data =  reactive<any>({
  listInfo: [],
  memberLength : 0,
  queryItem: {},
  titleArray: []

})
onShow(() => {
  const pages = getCurrentPages()
  let titleArray: any = [] //标题数据
  pages.forEach((_item, index) => {
    if (index > 0) {
      const currentPage: any = pages[pages.length - index]
      const options = currentPage.options
      let data: any = JSON.parse(options.item)
      let jsons: any = {}
      jsons = {
        name: data.label
      }
      titleArray.push(jsons)
    }
  })
  data.titleArray = titleArray.reverse()
})
onLoad(async(query) => {
  let length:any = 0
  if (query && query.item) {
    let item = JSON.parse(query.item)
    data.queryItem = item
    let res = await config.loadSettingMenu();
    res.children.forEach((element) => {
      if(element.key === item.key){
        length = element.item.target.members?.length
      }
    })
  }
  data.memberLength = length
})

function goMembers() {
  const params = {
    key: data.queryItem.key,
    label: data.queryItem.title,
    icon: data.queryItem.icon,
    itemType: 'member',
    title: data.queryItem.label
  }
  uni.navigateTo({
    url: '/pages/relation/member/memberList?item=' + JSON.stringify(params)
  })
}
</script>

<style lang="scss">
  @import '../../../common/style/global.scss';
  .title{
    font-size: 16px;
    color: #15181D;
    font-weight: bold;
    justify-content: center ;
    align-items: center;
    .icon-img{
      width: 24px;
      height: 24px;
      margin-right: 15px;
    }
  }
  .num{
    font-size: 20px ;
    font-weight: 500;
    margin-top: 10px;
  }
</style>